<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @current-change="handleCurrentChange">
              <el-table-column
                  label="商品名称"
                  prop="productBean.productName"
                  width="200">
              </el-table-column>
              <el-table-column
                  label="厂家"
                  prop="productBean.factory"
                  width="200">
              </el-table-column>
              <el-table-column
                  label="采购金额"
                  prop="productBean.purchasePrice"
                  width="200">
              </el-table-column>
              <el-table-column
                  label="采购金额"
                  prop="productBean.salePrice"
                  width="200">
              </el-table-column>
              <el-table-column
                  label="采购数量"
                  prop="purchaseNum"
                  width="200">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="display: flex;justify-content: center">
      <el-row style="margin-top: 50px">
        <el-tooltip class="item" content="请选中商品,然后修改数量" effect="dark" placement="top">
          <el-input v-model="upPurchaseNum" placeholder="输入新的采购数量" style="width:200px;margin-right: 10px"
                    @blur="updateNum"></el-input>
        </el-tooltip>
        <!-- 选择框，v-model代表的是选中的值，其下是自动循环生成的选择选项 -->
        <el-select v-model="supplierId" placeholder="请选择" style="margin-right: 10px" @change="change">
          <el-option
              v-for="item in options"
              :key="item.supplierId"
              :label="item.supplierName"
              :value="item.supplierId">
          </el-option>
        </el-select>
        <el-button plain type="primary" @click="addNew">商品添加</el-button>
        <el-button plain type="primary" @click="letIn">入库</el-button>
      </el-row>
    </div>

    <el-dialog
        :visible.sync="addNewInfo"
        title="添加新的入库商品"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="商品名称">
          <el-input v-model="newProductName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="生产厂家">
          <el-input v-model="newFactory" placeholder="请输入内容"></el-input>
        </el-form-item>
        <!--    商品类别    -->
        <el-form-item label="商品类别">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建议采购价">
          <el-input v-model="newPurchasePrice" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="建议销售价">
          <el-input v-model="newSalePrice" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="采购数量">
          <el-input v-model="newPurchaseNum" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
              :action="uploadUrl"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
              class="avatar-uploader"
              name="imgPath">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100px;height: 100px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button plain type="primary" @click="addNewPro">点击添加</el-button>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "PurchaseIn",
  data() {
    return {
      currentRow: 0,//当前选中列
      tableData: [],
      showInfoById: false,
      searchName: '',
      searchScope: '',
      searchScope2: '',
      options: [],
      supplierId: 1,//设置select框默认值
      upPurchaseNum: 0,//预备更新的入库数量
      addNewInfo: false,
      newProductName: '',
      newFactory: '',
      options2: [{
        value: '电脑产品',
        label: '电脑产品'
      }, {
        value: '安防产品',
        label: '安防产品'
      }, {
        value: '打印扫描设备',
        label: '打印扫描设备'
      }, {
        value: '办公耗材',
        label: '办公耗材'
      }],
      value: '电脑产品',
      newPurchasePrice: 0,
      newSalePrice: 0,
      newPurchaseNum: 0,
      imgPath: '',
      imageUrl: '',
      uploadUrl: "api/product/uploadImg",
    }
  },
  mounted() {
    this.showPage()
    this.getSupplier()
  },
  methods: {
    getSupplier() {
      let url = "api/supplier/showAllSupplier"
      this.axios.get(url).then(
          r => {
            this.options = r.data
            console.log(this.options)
          }
      )
    },
    change() {
      this.showPage()
    },
    showPage() {
      let url = "api/purchaseCar/showPurchaseCarByPage/" + this.supplierId + "/" + this.$store.state.user.userId
      this.axios.get(url).then(
          r => {
            this.tableData = r.data
          }
      )
    },
    messageShow(title, message) {
      this.$notify({
        title: title,
        message: (message)
      });
    },
    addNew() {
      this.addNewInfo = true
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      //上传成功
      if (res != "no") {
        console.log(res)
        this.imgPath = res
        this.$message.success('文件上传成功');
      } else {
        this.$message.success("文件上传失败");
      }
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //上传图片之后
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    addNewPro() {
      let url = "api/product/addNewProduct/" + this.newProductName + "/" +
          this.newFactory + "/" + this.value + "/" + this.newPurchasePrice + "/" +
          this.newSalePrice + "/" + this.imgPath + "/" + this.newPurchaseNum + "/" +
          this.$store.state.user.userId + "/" + this.supplierId

      this.axios.post(url).then(
          result => {
            console.log(result.data)
            this.messageShow('', result.data.info)
            this.addNewInfo = false
            this.showPage()
          }
      )
    },
    handleCurrentChange(val) {
      //必须不为null才能进行跳转分页
      if (val != null) {
        this.currentRow = val;
      }
    },
    //更新采购数量
    updateNum() {
      if (this.upPurchaseNum === "" || this.currentRow == 0) {
        this.messageShow("未确定对象", "请先选中你要进行更新的商品")
        return
      }

      console.log(this.currentRow)
      if (this.upPurchaseNum < 0) {
        this.messageShow("更新数量失败", "请输入正确的采购数量")
        this.upPurchaseNum = 0
        return
      }
      let productId = this.currentRow.productBean.productId
      let url = "api/purchaseCar/updatePurchaseNum/" + this.supplierId + "/" + this.$store.state.user.userId + "/" + productId + "/" + this.upPurchaseNum
      this.axios.post(url).then(
          r => {
            this.messageShow("", r.data.info)
            this.currentRow = 0
            this.upPurchaseNum = 0
            this.showPage()
          })
    },
    letIn() {
      console.log(this.tableData)
      if (this.tableData.length === 0) {
        this.messageShow("无法进行入库", "暂无有效数据")
        return;
      }
      let x = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].purchaseNum === 0) {
          x++;
        }
      }
      if (x === this.tableData.length) {
        this.messageShow("无法进行添加", "现有商品皆未进行有效数量设置")
        return;
      }
      let url = "api/purchaseCar/purchaseProducts/" + this.supplierId + "/" + this.$store.state.user.userId
      this.axios.post(url).then(
          r => {
            this.messageShow("", r.data.info)
            this.showPage()
          })
    }
  }
}
</script>

<style scoped>

</style>